"use client"
import React from 'react';
import Typed from 'typed.js';
import '../../public/assets/fontawesome-free-6.4.2-web/css/all.min.css'
import HomeSlide from './components/home_slide.js';
const About = () => {
  // 在组件挂载后初始化Typed.js
  React.useEffect(() => {
    const options = {
      stringsElement: '#typed-strings',
      typeSpeed: 100,
      backSpeed: 100,
      loop: true,
      loopCount: Infinity,
    };
    const typed = new Typed('#typed', options);
    // 在组件卸载时销毁Typed.js实例
    return () => {
      typed.destroy();
    };
  }, []);

  let translateX = '0px';
  const img1 = React.useRef(null)
  const img2 = React.useRef(null)
  const img3 = React.useRef(null)
  const img4 = React.useRef(null)
  const img5 = React.useRef(null)
  const img6 = React.useRef(null)
  const img7 = React.useRef(null)
  const img8 = React.useRef(null)
  const img9 = React.useRef(null)
  const img10 = React.useRef(null)
  const img11 = React.useRef(null)
  const img12 = React.useRef(null)
  const img13 = React.useRef(null)
  const img14 = React.useRef(null)
  const img15 = React.useRef(null)
  const img16 = React.useRef(null)
  function onMouseEnter(event) {
    translateX = event.clientX
    img1.current.style.transition = 'none'
    img2.current.style.transition = 'none'
    img3.current.style.transition = 'none'
    img4.current.style.transition = 'none'
    img5.current.style.transition = 'none'
    img6.current.style.transition = 'none'
    img7.current.style.transition = 'none'
    img8.current.style.transition = 'none'
    img9.current.style.transition = 'none'
    img10.current.style.transition = 'none'
    img11.current.style.transition = 'none'
    img12.current.style.transition = 'none'
    img13.current.style.transition = 'none'
    img14.current.style.transition = 'none'
    img15.current.style.transition = 'none'
    img16.current.style.transition = 'none'
  }
  function onMouseMove(event) {
    let disX = event.clientX - translateX;
    // 第一张移动图
    let translate_x_1 = (disX * 14 / 1380);
    img1.current.style.transform = `translate(${translate_x_1}px, 0px)`

    let translate_x_2 = 21 + disX * 35 / 1380
    img2.current.style.transform = `translate(${translate_x_2}px, 0px)`

    let translate_x_3 = -30 + disX * 60 / 1380
    img3.current.style.transform = `translate(${translate_x_3}px, 0px)`

    let translate_x_4 = 360 + disX * 60 / 1380
    img4.current.style.transform = `translate(${translate_x_4}px, 0px)`

    let translate_x_5 = -240 + disX * 120 / 1380
    img5.current.style.transform = `translate(${translate_x_5}px, -36px)`

    let translate_x_6 = 140 + disX * -210 / 1380
    img6.current.style.transform = `translate(${translate_x_6}px, 0px)`

    let translate_x_7 = disX * 350 / 1380
    img7.current.style.transform = `translate(${translate_x_7}px, 0px)`

    let translate_x_8 = -90 + disX * 120 / 1380
    img8.current.style.transform = `translate(${translate_x_8}px, 12px)`

    let translate_x_9 = -350 + disX * 175 / 1380
    img9.current.style.transform = `translate(${translate_x_9}px, 57px)`

    let translate_x_10 = -165 + disX * 165 / 1380
    img10.current.style.transform = `translate(${translate_x_10}px, 0px)`

    let translate_x_11 = -360 + disX * 210 / 1380
    img11.current.style.transform = `translate(${translate_x_11}px, 12px)`

    let translate_x_12 = -132 + disX * 240 / 1380
    img12.current.style.transform = `translate(${translate_x_12}px, 57px)`

    let translate_x_13 = 180 + disX * 300 / 1380
    img13.current.style.transform = `translate(${translate_x_13}px, 12px)`

    let translate_x_14 = -75 + disX * 210 / 1380
    img14.current.style.transform = `translate(${translate_x_14}px, -4.25px)`

    let translate_x_15 = -1440 + disX * 500 / 1380
    img15.current.style.transform = `translate(${translate_x_15}px, 0px)`

    let translate_x_16 = 1500 + disX * 350 / 1380
    img16.current.style.transform = `translate(${translate_x_16}px, 0px)`

  }

  function onMouseLeave(params) {
    img1.current.style.transition = 'all 0.5s'
    img1.current.style.transform = `translate(0px, 0px)`
    img2.current.style.transition = 'all 0.5s'
    img2.current.style.transform = `translate(21px, 0px)`
    img3.current.style.transition = 'all 0.5s'
    img3.current.style.transform = `translate(-30px, 0px)`
    img4.current.style.transition = 'all 0.5s'
    img4.current.style.transform = `translate(360px, 0px)`
    img5.current.style.transition = 'all 0.5s'
    img5.current.style.transform = `translate(-240px, -36px)`
    img6.current.style.transition = 'all 0.5s'
    img6.current.style.transform = `translate(140px, 0px)`
    img7.current.style.transition = 'all 0.5s'
    img7.current.style.transform = `translate(0px, 0px)`
    img8.current.style.transition = 'all 0.5s'
    img8.current.style.transform = `translate(-90px, 12px)`
    img9.current.style.transition = 'all 0.5s'
    img9.current.style.transform = `translate(-350px, 57px)`
    img10.current.style.transition = 'all 0.5s'
    img10.current.style.transform = `translate(-165px, 0px)`
    img11.current.style.transition = 'all 0.5s'
    img11.current.style.transform = `translate(-360px, 12px)`
    img12.current.style.transition = 'all 0.5s'
    img12.current.style.transform = `translate(-132px, 57px)`
    img13.current.style.transition = 'all 0.5s'
    img13.current.style.transform = `translate(180px, 12px)`
    img14.current.style.transition = 'all 0.5s'
    img14.current.style.transform = `translate(-75px, -4.25px)`
    img15.current.style.transition = 'all 0.5s'
    img15.current.style.transform = `translate(-1440px, 0px)`
    img16.current.style.transition = 'all 0.5s'
    img16.current.style.transform = `translate(1500px, 0px)`
  }

  return (
    <div>
      <div className=' bg-white bili-header' >
        <div className='bili-header__banner' >
          <div className='animated-banner' onMouseMove={onMouseMove} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' src="/0876da4f3ec73ff180fc87b46b6d1bcf4d52030a.png@1c.webp" style={{ width: '2100px', height: "196.7px", verticalAlign: "middle", '--translate-x': '0px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img1} src="/4adc24834b64143296d77bc81ccd952a59301b08.png@1c.webp" style={{ height: '196.7px', width: '1710.8px', verticalAlign: "middle", '--translate-x': '0px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img2} src="/e33992d2d75647af38c50792c199fb9db006786c.png@1c.webp" style={{ height: '196.7px', width: '2100px', verticalAlign: "middle", '--translate-x': '21px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img3} src="/57102cf6e2e2845f2773581928c1d0f0c1985a3e.png@1c.webp" style={{ width: '1649.4px', height: "181px", verticalAlign: "middle", '--translate-x': '-30px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element  scale-100 opacity-100 border-none border-0' ref={img4} src="/0f79aa287163a3271c6cb22a73a6dc0fc210ab7c.png@1c.webp" style={{ width: '90px', height: "81px", verticalAlign: "middle", '--translate-x': '360px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img5} src="/639de634f90688e86b7bd32924cfb029a316cde4.png@1c.webp" style={{ height: '28.8px', width: '84px', verticalAlign: "middle", '--translate-x': '-240px', '--translate-y': '-36px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img6} src="/852c3bd9d9608ceccb7265de8cea7cf3a4b039eb.png@1c.webp" style={{ height: '196.7px', width: '543.9px', verticalAlign: "middle", '--translate-x': '140px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0 ' ref={img7} src="/9556f65510f73c44aa6756ee9b8cf7fc2562b906.png@1c.webp" style={{ height: "196.7px", width: '226.8px', verticalAlign: "middle", '--translate-x': '0px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element  scale-100 opacity-100 border-none border-0' ref={img8} src="/530a4624fe408881101885c6f24c72e8c2a14fb6.png@1c.webp" style={{ height: "108px", width: '96px', verticalAlign: "middle", '--translate-x': '-90px', '--translate-y': '12px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img9} src="/bf896616dec163402ec79a81f936af67932eca2f.png@1c.webp" style={{ height: '74.2px', width: '1713.6px', verticalAlign: "middle", '--translate-x': '-350px', '--translate-y': '57px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img10} src="/32aa867cd3e8fba371a2be90d7d844a68c67f7a5.png@1c.webp" style={{ height: '146.85px', width: '180.4px', verticalAlign: "middle", '--translate-x': '-165px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0 ' ref={img11} src="/c6263485a0218c887848c47a0fe4f515006e1567.png@1c.webp" style={{ height: "160.8px", width: '207px', verticalAlign: "middle", '--translate-x': '-360px', '--translate-y': '12px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element  scale-100 opacity-100 border-none border-0' ref={img12} src="/cd4fda9478b06a8d81cd04f69d7a2ad475d1db40.png@1c.webp" style={{ height: "63px", width: '1650px', verticalAlign: "middle", '--translate-x': '-132px', '--translate-y': '57px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img13} src="/0479542df6a7c5deddf60fbbf63b6e1f1f770c08.png@1c.webp" style={{ height: '161.4px', width: '256.8px', verticalAlign: "middle", '--translate-x': '180px', '--translate-y': '12px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img14} src="/b6f4359409b4550fb38594d8c227902db29c720a.png@1c.webp" style={{ height: '238.85px', width: '2550px', verticalAlign: "middle", '--translate-x': '-75px', '--translate-y': '-4.25px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0 ' ref={img15} src="/8a6899088fc9dcd37a0039884fb77f69dc3b1c30.png@1c.webp" style={{ height: "224.8px", width: '500.8px', verticalAlign: "middle", '--translate-x': '-1440px', '--translate-y': '0px' }}
              />
            </div>
            <div className='layer'>
              <img className='rotate-0 translate-element scale-100 opacity-100 border-none border-0' ref={img16} src="/96704a6197153e1717a910e6c227937f34743cee.png@1c.webp" style={{ height: "196.6px", width: '408.6px', verticalAlign: "middle", '--translate-x': '1500px', '--translate-y': '0px' }}
              />
            </div>
          </div>
          <div></div>
          <div className='flex items-end w-full max-w-full absolute job'>
            <div id="typed-strings" className=' text-white hidden' >
              <p>你好呀，我是夏天，一名前端开发程序员</p>
              <p>你可以在这里随便转转~</p>
            </div>
            <strong id="typed" className=' text-white job_text inline-block h-1/2' ></strong>
          </div>

        </div>
        <style jsx>
          {`
                    .translate-element{
                        transform: translate(var(--translate-x), var(--translate-y));
                    }
                    .job{
                    }
                    .job_text{
                        z-index:1;
                    }
                   
                `}
        </style>
      </div>
        <HomeSlide props={{tags:10,categories:10,posts:10}}/>                
    </div>

  )
}

export default About